<config lang="json">
{
  navigationBarTitleText: '授权登录',
  usingComponents: {

  }
}
</config>

<template>
   <div class="register-wrapper d-flex align-items-center justify-content-center">
      <div class="register-content">
        <div class="d-flex justify-content-center mb-4 logo">
          <img :src="'logo.png'|imgUrl" alt="">
        </div>
        <van-field :value="phoneNum" @change="setPhoneNum" label="手机号" placeholder="请输入手机号" />
        <van-field :value="name" @change="setName" label="用户名" placeholder="请输入用户名" />
        <div class="d-flex justify-content-center mt-4">
          <van-button class="reg-button" type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo"> 授权微信用户信息</van-button>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import account from '../account/account'
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Register extends Vue {
  public phoneNum: string;
  public name: string;
  public canIUse = wx.canIUse('button.open-type.getUserInfo');

  public onShow () {
    console.log('Page [Register] onShow')
  }
  public setPhoneNum (event) {
    this.phoneNum = event.detail
  }

  public setName (event) {
    this.name = event.detail
  }
  public async bindGetUserInfo (e) {
    if (!e.detail.userInfo) {
      // 用户拒绝了授权
      Megalo.showToast({
        title: '为了您更好的体验,请先同意授权',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }
    this.$globalData.userInfo = e.detail.userInfo
    var res = await Megalo.login()

    // 用户按了允许授权按钮
    this.$globalData.appUser = await this.$http.post({
      url: 'weChatAccount/register',
      data: {
        phoneNum: this.phoneNum,
        name: this.name,
        wxName: this.$globalData.userInfo.nickName,
        avatar: this.$globalData.userInfo.avatarUrl,
        code: res.code
      }
    })
    await account.StartUp()
  }
}
</script>

<style lang="stylus" scoped>

 .register-wrapper {
  height: 100%;
  background-color: #ffffff;

  .register-content {
    margin-top: -120px;
  }

  .logo {
    image {
      width: 156px;
      height: 42px;
    }
  }
}
</style>
